<template>
  <div>
    <a-modal
        v-model:visible="addRoleFormVisible"
        title="添加角色"
        :confirm-loading="addRoleFormConfirmLoading"
        @ok="addRole"
        @cancel="handleClose"
    >
      <div class="form_box">
        <a-form
            :model="formState"
            v-bind="layout"
            name="nest-messages"
            :validate-messages="validateMessages"
            ref="roleForm"
        >
          <a-form-item :name="['role', 'roleName']" label="角色名称" :rules="[{ required: true }]">
            <a-input v-model:value="formState.role.roleName"/>
          </a-form-item>
        </a-form>

      </div>

    </a-modal>
  </div>
</template>

<script>
import {reactive, ref} from "vue";
import {addRoles, getRoleList} from "@/apis/role";
import {message} from "ant-design-vue";

export default {
  name: "RoleForm",

  setup(props, ctx) {
    const addRoleFormVisible = ref(false)
    const addRoleFormConfirmLoading = ref(false)

    const layout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const validateMessages = {
      required: '${label} is required!',
      types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
      },
      number: {
        range: '${label} must be between ${min} and ${max}',
      },
    };
    const formState = reactive({
      role: {
        roleId: '',
        roleAuth: ''
      }
    })

    const visible = () => {
      addRoleFormVisible.value = true;
    }


    const addRole = () => {
      addRoleFormConfirmLoading.value = true;
      setTimeout(() => {
        addRoleFormVisible.value = false;
        addRoleFormConfirmLoading.value = false;
        addRoles(formState.role).then(res => {
          if (res.data === true) {
            getRoleList().then(res => {
              console.log(res)
              ctx.emit('updateRoleList', res.data)
              message.success("添加角色成功")
            })
          }
        })
      }, 2000);
    }


    const handleClose = () => {

    }
    return {
      addRoleFormVisible,
      addRoleFormConfirmLoading,
      addRole,
      handleClose,
      formState,
      layout,
      validateMessages,
      visible,
    }
  },
}
</script>

<style scoped>

</style>